<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tencent 腾讯</title>
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/footer.css">
  </head>
  <body>
    <!-- 导航栏模块 -->
    <div class="nav">
      <div class="nav-content">
        <img src="img/menu_logo.png" alt="logo"/>
        <ul>
          <div class="nav-main">
            <li onmouseover="changeSubNav(0,true)" onmouseout="changeSubNav(0,false)">
              <a href="#">简介</a>
              <ul class="sub-nav">
                <li><a href="#">公司简介</a></li>
                <li><a href="#">愿景及使命</a></li>
                <li><a href="#">发展历程</a></li>
                <li><a href="#">业务架构</a></li>
                <li><a href="#">管理团队</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">办公地点</a></li>
              </ul>
            </li>
            <li onmouseover="changeSubNav(1,true)" onmouseout="changeSubNav(1,false)">
              <a href="#">业务</a>
              <ul class="sub-nav">
                <li><a href="#">面向用户</a></li>
                <li><a href="#">面向企业</a></li>
                <li><a href="#">创新科技</a></li>
              </ul>
            </li>
            <li onmouseover="changeSubNav(2,true)" onmouseout="changeSubNav(2,false)">
              <a href="#">员工</a>
              <ul class="sub-nav">
                <li><a href="#">人才发展</a></li>
                <li><a href="#">腾讯学堂</a></li>
                <li><a href="#">工作环境</a></li>
                <li><a href="#">员工活动</a></li>
              </ul>
            </li>
            <li onmouseover="changeSubNav(3,true)" onmouseout="changeSubNav(3,false)">
              <a href="#">ESG</a>
              <ul class="sub-nav">
                <li><a href="#">环境</a></li>
                <li><a href="#">社会</a></li>
                <li><a href="#">治理</a></li>
                <li><a href="#">ESG评级</a></li>
                <li><a href="#">报告</a></li>
              </ul>
            </li>
            <li onmouseover="changeSubNav(4,true)" onmouseout="changeSubNav(4,false)">
              <a href="#">投资者</a>
              <ul class="sub-nav">
                <li><a href="#">季度业绩及投资者新闻</a></li>
                <li><a href="#">公告及财务报告</a></li>
                <li><a href="#">业绩电话会及投资者日历</a></li>
                <li><a href="#">投资者工具包</a></li>
                <li><a href="#">证券及债券信息</a></li>
                <li><a href="#">环境、社会及管治</a></li>
              </ul>
            </li>
            <li onmouseover="changeSubNav(5,true)" onmouseout="changeSubNav(5,false)">
              <a href="#">媒体</a>
              <ul class="sub-nav">
                <li><a href="#">企业动态</a></li>
                <li><a href="#">财务新闻</a></li>
                <li><a href="#">腾讯视角</a></li>
                <li><a href="#">媒体资料库</a></li>
              </ul>
            </li>
          </div>
          <li class="language">
            <a href="#" class="active">简</a>
            <span>/</span>
            <a href="#">繁</a>
            <span>/</span>
            <a href="#">EN</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="header">
      <!-- 轮播图模块 -->
      <div class="banner">
        <ul class="banner-group">
          <li>
            <img src="img/home-bg-carbon.jpg" alt="carbon" class="background" />
            <div class="text">
              <h1>腾讯碳中和目标及行动路线报告</h1>
              <p>点击了解腾讯可持续发展和碳中和目标的细节</p>
            </div>
          </li>
          <li>
            <img src="img/banner-wwl-1.jpg" alt="carbon" class="background" />
            <div class="text">
              <h1>为她力量喝彩</h1>
              <p>今年国际妇女节期间，我们推出#WomenWhoLead专题文章，分享腾讯七位女性领袖的事业与生活心得。</p>
            </div>
          </li>
          <li>
            <img src="img/banner-game.jpg" alt="carbon" class="background" />
            <div class="text">
              <h1>游戏行业未来可期</h1>
              <p>新兴市场游戏行业蓬勃发展，游戏生态更加丰富多样。 腾讯高级副总裁马晓轶分享了他对行业未来的看法，以及对游戏发行商的建议。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="main">
      <div class="main-content">
        <!-- 把banner的操作条放到main里面去了 -->
        <div class="operation-bar">
          <div class="direction">
            <img src="img/icon_arrow_r.png" alt="right" class="arrow-left" onclick="lastBanner()">
            <img src="img/icon_arrow_r.png" alt="right" class="arrow-right" onclick="nextBanner()">
          </div>
          <!-- 小圆点 -->
          <ul class="page-dot">
            <li onclick="move(0)"></li>
            <li onclick="move(1)"></li>
            <li onclick="move(2)"></li>
          </ul>
        </div>
        <!-- 动态内容 -->
        <div class="news">
          <h2>最新动态</h2>
          <!-- content里面的新闻板块如果是深色背景，所有的背景颜色都在标签内使用style进行设置，同时class加上dark-background。 -->
          <!-- 如果小的新闻板块跟top-news-content（大的新闻板块）在同一行，小的新闻板块中class要加上with-top -->
          <div class="content">
            <div class="top-news-content">
              <div class="img-area">
                <img src="img/0faf421ba355bdd964ba6c57d72db422.png" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2022.02.24</div>
                </div>
                <h3>如何迈向碳中和的未来</h3>
                <p>作为一家科技公司，腾讯对碳中和议题有着自己的理解，我们一直在思考全社会该如何利用现有和新兴技术减缓人类活动对地球的影响。</p>
              </div>
            </div>
            <div class="news-content with-top dark-background" style="background-color: rgb(0,169,206);">
              <div class="img-area">
                <img src="img/e28c576573794b182294436450261918.jpg" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2022.02.24</div>
                </div>
                <h3>腾讯宣布2030年实现碳中和</h3>
                <p>腾讯承诺不晚于2030年实现自身运营及供应链的全面碳中和，公司计划不晚于2030年实现100%绿色电力。</p>
              </div>
            </div>
            <div class="news-content dark-background" style="background-color: rgb(0,82,217);">
              <div class="img-area">
                <img src="img/014fbaca05ab7c2ed21c6868c3069f4d.png" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2022.02.24</div>
                </div>
                <h3>打造智慧城市，推动游戏向善</h3>
                <p>技术能够改善人类的生活。</p>
              </div>
            </div>
            <div class="news-content">
              <div class="img-area">
                <img src="img/81c840dc5f73553160611f85273c5aaa.png" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2022.02.24</div>
                </div>
                <h3>腾讯K6社区平台中心总监蔡俊：突破极限，超越自我</h3>
                <p>本期我们邀请到腾讯K6社区平台中心总监蔡俊与大家分享她的职场故事。</p>
              </div>
            </div>
            <div class="news-content" style="background-color: rgb(216,215,223);">
              <div class="img-area">
                <img src="img/5d6edfeff8e33fe96da97d752d2d3253.jpg" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2022.03.10</div>
                </div>
                <h3>诺贝尔奖得主让·梯若尔教授与腾讯对话︰气候变化与建设碳中和的未来</h3>
                <p>碳中和的未来取决于良好政策、绿色技术和多方合作。</p>
              </div>
            </div>
            <div class="top-news-content">
              <div class="img-area">
                <img src="img/8dab1b58f5d1e598b5786fea7f1573e3.jpg" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2020.11.19</div>
                </div>
                <h3>AI技术如何帮助听障群体“听更清”？</h3>
                <p>腾讯天籁AI音频技术通过AI降噪算法改善听障人群听觉体验，让他们真正听清世界。</p>
              </div>
            </div>
            <!-- 跟top-news-content在同一行 -->
            <div class="news-content with-top dark-background" style="background-color: rgb(0,82,217);">
              <div class="img-area">
                <img src="img/ad84d0de738deda8603d0103f332f30b.jpg" alt="如何迈向碳中和的未来">
              </div>
              <div class="text">
                <div class="time-border">
                  <div>2021.08.20</div>
                </div>
                <h3>“能源互联网”可助全球能源加速转型</h3>
                <p>网大为（David Wallerstein）作为腾讯首席探索官，近期受邀出席“国际能源变革对话”，并就如何发挥包括云、软件、数据、人工智能和机器学习等互联网先进科技在能源转型中的重要作用，分享了前瞻性的观点。</p>
              </div>
            </div>
            <!-- full-img即文字在图片中，对应板块用不同的样式 -->
            <div class="top-news-content full-img dark-background">
              <div class="img-area">
                <div class="gradient"></div>
                <img src="img/bg-together.png" alt="抗疫" class="resp"/>
                <div class="text">
                  <h3>全球战疫，一起行动</h3>
                  <p>腾讯发挥科技优势，为远程办公、学习和娱乐提供工具和服务，减缓新冠疫情传播。</p>
                </div>
              </div>
            </div>
            <div class="news-content full-img dark-background">
              <div class="img-area video">
                <div class="play-btn">
                  <div class="triangle"></div>
                </div>
                <video poster="img/943cdbc7a41b479946a3ed28d341ed25.png" height="100%">
                  <source src="video/2a59c30bc897b54b072eb3d96c2af4e5.mp4" type="video/mp4">
                  您的浏览器不支持播放该视频，请升级至最新版浏览器。
                </video>
                <div class="text">
                  <h3>用户为本，科技向善</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="company">
          <div>
            <div class="cover"></div>
            <img src="img/index_detail_1.jpg" alt="公司简介" />
            <div class="text">
              <h3>公司简介</h3>
              <div class="underline"></div>
            </div>
          </div>
          <div>
            <div>
              <div class="cover"></div>
              <img src="img/index_detail_2.jpg" alt="公司简介" />
              <div class="text">
                <h3>企业文化</h3>
                <div class="underline"></div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <div class="cover"></div>
              <img src="img/index_detail_3.jpg" alt="公司简介" />
              <div class="text">
                <h3>办公地点</h3>
                <div class="underline"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        <div class="tab-content">
          <ul class="tab-bar">
            <li class="active" onmouseover="mouseOver(0)">
              <div class="line"></div>
              <div class="text">
                <h3>连接用户与生活</h3>
                <p>让生活更便捷更多彩</p>
                <img src="img/icon_arrow_r.png" alt="arrow" class="tab-arrow">
              </div>
            </li>
            <li onmouseover="mouseOver(1)">
              <div class="line"></div>
              <div class="text">
                <h3>连接企业与科技</h3>
                <p>让生活更便捷更多彩</p>
                <img src="img/icon_arrow_r.png" alt="arrow" class="tab-arrow">
              </div>
            </li>
            <li onmouseover="mouseOver(2)">
              <div class="text">
                <div class="line"></div>
                <h3>连接现在与未来</h3>
                <p>让生活更便捷更多彩</p>
                <img src="img/icon_arrow_r.png" alt="arrow" class="tab-arrow">
              </div>
            </li>
          </ul>
          <div class="img-content">
            <ul>
              <li class="active">
                <div>
                  <div class="text">
                    <div class="text-title"><h4>通信与社交</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。</p>
                  </div>
                  <img src="img/index_link_1_1.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>数字内容</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>基于优质内容，以技术为驱动引擎，探索社交和内容融合的下一代形态。</p>
                  </div>
                  <img src="img/index_link_1_2.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>金融科技服务</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>连接用户、商户和金融机构，提供安全、专业、便捷的金融产品与服务。</p>
                  </div>
                  <img src="img/index_link_1_3.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>工具</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>提供多种工具性软件，帮助用户快速直接解决各项具体需求。</p>
                  </div>
                  <img src="img/index_link_1_4.jpg" alt="" />
                </div>
              </li>
              <li>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>腾讯广告营销</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>大数据营销平台，汇聚腾讯全量应用场景，提供一体化数字化营销方案。</p>
                  </div>
                  <img src="img/index_link_2_1.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>腾讯云</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>提供领先的云产品与云服务，辅助企业走向数字化和全球化。</p>
                  </div>
                  <img src="img/index_link_2_2.jpg" alt="" />
                </div>
                <div class="long-img">
                  <div class="text">
                    <div class="text-title"><h4>智慧产业</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>通过云、AI、大数据分析、安全、支付、小程序、LBS等互联网前沿技术和产品，<br>打造智慧产业方案，助力产业数字化升级。</p>
                  </div>
                  <img src="img/index_link_2_3.jpg" alt=""/>
                </div>
              </li>
              <li>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>人工智能</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>大数据营销平台，汇聚腾讯全量应用场景，提供一体化数字化营销方案。</p>
                  </div>
                  <img src="img/index_link_3_1.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>物联网</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>通过腾讯云物联网，致力提供IoT全栈产品和解决方案。</p>
                  </div>
                  <img src="img/index_link_3_2.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>多媒体</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>腾讯多媒体实验室专注音视频通信技术的前瞻性研究。</p>
                  </div>
                  <img src="img/index_link_3_3.jpg" alt="" />
                </div>
                <div>
                  <div class="text">
                    <div class="text-title"><h4>腾讯探索</h4><img src="img/icon_arrow_r.png"/></div>
                    <p>携手合作伙伴探索未来和相关技术，帮助解决全球在食物、能源和水源方面的挑战。</p>
                  </div>
                  <img src="img/index_link_3_4.jpg" alt="" />
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 连接责任与信任 -->
      <div class="resp-banner">
        <div class="banner">
          <img src="img/i_tri.png" alt="triangle" />
          <div class="page-switcher">
            <span onclick="switchRespBanner('next')"><</span>
            <span onclick="switchRespBanner('last')">></span>
          </div>
          <div class="banner-content">
            <img src="img/index_resp_bg0.png" alt="0"/>
            <div class="text">
              <h4>全球战疫，一起行动</h4>
              <p>在新冠肺炎疫情之战中，腾讯秉持科技向善，以互联网科技的力量，通过我们的技术和产品为全球战疫提供支持。</p>
            </div>
          </div>
          <div class="banner-content">
            <img src="img/index_resp_bg1.jpg" alt="1" />
            <div class="text">
              <h4>99公益日</h4>
              <p>每年一度于9月举行的全民公益活动，透过网上平台将大众在活动期间网上作出的捐款进行匹配。</p>
            </div>
          </div>
          <div class="banner-content">
            <img src="img/index_resp_bg2.jpg" alt="2" />
            <div class="text">
              <h4>腾讯长城保护项目</h4>
              <p>腾讯公益慈善基金会与中国文物保护基金会共同合作，吸引公众关注和参与长城保护的文化遗产类公益项目。</p>
            </div>
          </div>
          <div class="banner-content">
            <img src="img/index_resp_bg3.jpg" alt="3" />
            <div class="text">
              <h4>腾讯为村</h4>
              <p>根据乡村使用场景定制微信公众号，形成由村、乡镇、区县、州市组成的公众号集群服务村民，打造手机上的“为村服务中心”。</p>
            </div>
          </div>
        </div>
        <div class="text">
          <h2>连接</h2>
          <h2>责任与信任</h2>
          <p>聚合微小善行，以科技让世界更美好</p>
          <img src="img/icon_arrow_r_dark.png" alt="arrow" />
        </div>
      </div>
      <!-- 连接人才与发展 -->
      <div class="dev-banner">
        <div class="text">
          <h2>连接</h2>
          <h2>人才与发展</h2>
          <p>激发活力，助力增长</p>
          <img src="img/icon_arrow_r_dark.png" alt="arrow" />
        </div>
        <ul class="banner-group">
          <li>
            <img src="img/index_develop_bg1.jpg" alt="carbon" class="dev-banner-img"/>
          </li>
          <li>
            <img src="img/index_develop_bg2.jpg" alt="develop2" class="dev-banner-img"/>
          </li>
          <li>
            <img src="img/index_develop_bg3.jpg" alt="carbon" class="dev-banner-img"/>
          </li>
        </ul>
        <div class="operation-bar">
          <div class="direction">
            <img src="img/icon_arrow_r.png" alt="right" class="arrow-left" onclick="changeSingleDevBanner(0)">
            <img src="img/icon_arrow_r.png" alt="right" class="arrow-right" onclick="changeSingleDevBanner(1)">
          </div>
          <!-- 小圆点 -->
          <ul class="page-dot">
            <li onclick="changeDevBanner(0)"></li>
            <li onclick="changeDevBanner(1)"></li>
            <li onclick="changeDevBanner(2)"></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="follow">
        <span>关注我们</span>
        <div>
          <img src="img/icon_wechat.png" alt="" class="social-img">
          <img src="img/icon_wechat_hover.png" alt="" class="hover-social-img">
        </div>
        <div>
          <img src="img/icon_weibo.png" alt="" class="social-img">
          <img src="img/icon_weibo_hover.png" alt="" class="hover-social-img">
        </div>
        <div>
          <img src="img/icon_twitter.png" alt="" class="social-img">
          <img src="img/icon_twitter_hover.png" alt="" class="hover-social-img">
        </div>
        <div>
          <img src="img/icon_in.png" alt="" class="social-img">
          <img src="img/icon_in_hover.png" alt="" class="hover-social-img">
        </div>
      </div>
      <div class="info">
        <div>
          <div class="title">加入我们</div>
          <ul>
            <li><a href="#">社会招聘</a></li>
            <li><a href="#">校园招聘</a></li>
            <li><a href="#">国际招聘</a></li>
          </ul>
        </div>
        <div>
          <div class="title">联系我们</div>
          <ul>
            <li><a href="#">客户服务</a></li>
            <li><a href="#">合作洽谈</a></li>
            <li><a href="#">腾讯采购</a></li>
            <li><a href="#">媒体及投资者</a></li>
          </ul>
        </div>
        <div>
          <div class="title">法律信息</div>
          <ul>
            <li><a href="#">服务协议</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">知识产权</a></li>
          </ul>
        </div>
        <div class="footer-logo">
          <img src="img/tencent_logo.png" alt="logo">
        </div>
      </div>
      <div class="copyright">
        <span>法律声明</span>
        <span>阳光准则</span>
        <span>网站地图</span>
        <span>粤网文【2017】6138-1456号</span>
        <span>粤B2-20090059</span>
        <span>粤公网安备 44030502008569号</span>
        <br />
        <span>Copyright © 1998 - 2022 Tencent. All Rights Reserved. 腾讯公司 版权所有</span>
      </div>
    </div>
    <div class="back-top" onclick="backTop()">
      <span>></span>
    </div>
    <script src="js/banner.js"></script>
    <script src="js/index.js"></script>
    <script src="js/nav.js"></script>
  </body>
</html>